<!--角色添加-->

<template>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header"><i class="fa fa-lastfm"></i>  角色管理</div>

        <div class="layui-col-md6" >
            <div class="layui-card" style="height:357px;">
                <div class="layui-card-header" style="color:#F56C6C;">
                    未激活角色
                    <button class="layui-btn" style="float:right;background:#F56C6C;" v-on:click="getActiveRole()"><i class="fa fa-angle-double-right"></i></button>    
                </div>
                <div class="layui-card-body">
                    <ul> 
                        <li class="my_li" v-for="(item,index) in noHaveRole"><input type="checkbox" v-on:click="leftCheckItem(item.roleId)" v-bind:value="item.roleId"  title="" class="checkBoxClass"><span class="my_span">{{item.roleName}}</span> </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card" style="height:357px;">
                <div class="layui-card-header" style="color:#67C23A;">
                    已激活角色
                    <button class="layui-btn" style="float:right;background:#67C23A;" v-on:click="removeRole()"><i class="fa fa-angle-double-left"></i></button>    
                </div>
                <div class="layui-card-body">
                    <ul>
                        <li class="my_li" v-for="(item,index) in haveRole"><input type="checkbox" v-on:click="rightCheckItem(item.roleId)" v-bind:value="item.roleId"  title="" class="checkBoxClass"><span class="my_span">{{item.roleName}}</span> </li>
                    </ul> 
                </div>
            </div>
        </div>
        
      </div>
    </div>
</template>
<script>
import Qs from 'qs'
export default {
    inject:['reload'],
    data () {
        return {
            haveRole:[],//已有的角色
            noHaveRole:[],//还没有激活的角色
            checkRoleCheckBox:[//已激活角色的复选框

            ],
            checkUnRoleCheckBox:[//未角色的复选框

            ]
        }
    },
    mounted: function (){//页面加载向后台发送数据还有create也是页面一加载就可以进行发送请求的
      this.getRoleList(); 
      this.getAllNoRoleList();
    },
    methods: {
        getAllNoRoleList:function(){//获取所有的未认证角色
            this.$axios
            .get('/bk-role/getAllNoRoleList',
                {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                for(var i=0;i<result.data.data.length;i++){
                    this.noHaveRole.push(
                        result.data.data[i]
                    );
                }
            })
            .catch(failResponse => {})
        },
        getRoleList: function () {
            this.$axios
            .get('/bk-role/getAllRoleList',
                {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
            for(var i=0;i<result.data.data.length;i++){
                this.haveRole.push(
                    result.data.data[i]
                );
            }
            })
            .catch(failResponse => {})
        },
        leftCheckItem:function(roleId){//勾选复选框到数组
        
            var flag=this.checkUnRoleCheckBox.indexOf(roleId);//如果存在返回值的下标，不存在返回-1
            if(flag==-1){
                this.checkUnRoleCheckBox.push(roleId);
            }else if(flag!=-1){
                this.checkUnRoleCheckBox.splice(flag,1);
            }
            console.log(this.checkUnRoleCheckBox);
        },
        rightCheckItem:function(roleId){
            var unflag=this.checkRoleCheckBox.indexOf(roleId);//勾选复选框到数组
            if(unflag==-1){
                this.checkRoleCheckBox.push(roleId);
            }else if(unflag!=-1){
                this.checkRoleCheckBox.splice(unflag,1);
            }
        },
        removeRole:function (){//将角色置为不激活状态
            if(this.checkRoleCheckBox.length==0){
                this.$message.error("请勾选要移除的角色");
            }else{
                var roleAuths=this.checkRoleCheckBox.join(',');
                var data=Qs.stringify({
                    "roleAuths":roleAuths
                })
                console.info(roleAuths);
                this.$axios
                .post('/bk-role/updateRole/0',data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then(result => {
                    if(result.data.code==200){
                        //this.checkRoleCheckBox=[];//清空复选框数组
                        this.reload();
                    }
                })
                .catch(failResponse => {})
            }
        },
        getActiveRole:function(){//激活角色
            if(this.checkUnRoleCheckBox.length==0){
                this.$message.error("请勾选要激活的角色");
            }else{
                var roleAuths=this.checkUnRoleCheckBox.join(',');
                var data=Qs.stringify({
                    "roleAuths":roleAuths,
                })
                console.info(roleAuths);
                this.$axios
                .post('/bk-role/updateRole/1',data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then(result => {
                    if(result.data.code==200){
                        //this.checkUnRoleCheckBox=[];//清空复选框数组
                        this.reload();
                    }
                })
                .catch(failResponse => {})
            }
        }
    }
}
</script>
<style>
.checkBoxClass{
    display: inline-block;
    width: 20px;
    height: 20px;
}
.my_li{
    font-size: 18px;
    font-family: 宋体;
}
.my_span{
    position: relative;
    top: -4px;
    margin-left: 10px;
}
</style>